<template>
  <!-- 群资料 -->
  <div class="h_full groupcontainer p-16">
    <div class="flexend mb-8">
      <div class="c_primary f-14 commhover">更新</div>
    </div>
    <!-- 群公告 -->
    <div class="rightbox mb-20">
      <div class="flexbetween mb-8">
        <div class="f-14 c_text2">群公告</div>
        <el-tooltip
          class="item"
          effect="dark"
          content="编辑群公告"
          placement="top-start"
        >
          <i class="el-icon-edit f-16 c_text3" @click="handleGG"></i>
        </el-tooltip>
      </div>
      <div class="boxcontent f-14 c_text2 y_over">
        <div v-if="notice"></div>
        <span v-else class="c_text4">暂无群公告</span>
      </div>
    </div>
    <!-- 群标签 -->
    <div class="rightbox mb-20">
      <div class="flexbetween mb-8">
        <div class="f-14 c_text2">群标签</div>
        <el-tooltip
          class="item"
          effect="dark"
          content="管理标签"
          placement="top-start"
        >
          <i class="el-icon-s-tools f-16 c_text3" @click="handleLabelOpen"></i>
        </el-tooltip>
      </div>
      <div class="boxcontent f-14 c_text2 y_over">
        <div v-if="notice"></div>
        <div v-else class="flexcolumn aligncenter c_text4 justifycenter h_full">
          <div><i class="el-icon-folder f-30 mb-10"></i></div>
          <div class="">暂无数据</div>
        </div>
      </div>
    </div>
    <!-- 群管理 -->
    <div class="rightbox mb-20">
      <div class="flexbetween mb-8">
        <div class="f-14 c_text2">群管理</div>
        <svg-icon class-name="f-16 c_text3" icon-class="icode" />
      </div>
      <div class="boxcontent hauto f-14 c_text2 y_over p-12 h">
        <div class="gmgtheader mb-16">
          <el-checkbox-group v-model="checkList">
            <el-checkbox :label="1" class="mb-6">禁止改群名</el-checkbox>
            <el-checkbox :label="2" class="mb-6">保存到通讯录</el-checkbox>
            <el-checkbox :label="3" class="mb-6">群聊邀请确认</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="flex c_text3 f-14 mt-10">
          <div class="itemtitle">群主：</div>
          <div
            class="itemcontent flex aligncenter commhover"
            @click="handleGroupOpen"
          >
            <span class="c_text2">Gardenia</span>
            <i class="el-icon-arrow-right c_666"></i>
          </div>
        </div>
        <div class="flex c_text3 f-14 mt-10">
          <div class="itemtitle">管理员：</div>
          <div class="itemcontent flex aligncenter commhover">
            <span class="c_text3">请设置</span>
            <i class="el-icon-plus c_666"></i>
          </div>
        </div>
        <div class="flex c_text3 f-14 mt-10">
          <div class="itemtitle">群动态：</div>
          <div class="itemcontent flex aligncenter">
            <span class="c_primary mr-12 commhover">行为轨迹</span>
            <span class="c_primary commhover" @click="handleInviteOpen">邀请情况</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 编辑公告 -->
    <edit-notice
      v-if="opengg"
      :visable="opengg"
      @close="handleGGClose"
    />
    <!-- 修改标签 -->
    <edit-label
      v-if="openlabel"
      :visable="openlabel"
      @close="handleLabelClose"
    />
    <!-- 转让群主 -->
    <transfer-group
      v-if="opengroup"
      :visable="opengroup"
      @close="handleGroupClose"
    />

    <!-- 邀请情况 -->
    <invite-group
      v-if="openinvite"
      :visable="openinvite"
      @close="handleInviteClose"
    />
  </div>
</template>
<script>
import EditNotice from './EditNotice.vue'
import TransferGroup from "./TransferGroup.vue";
import InviteGroup from "./InviteGroup.vue";
import EditLabel from './EditLabel.vue';
export default {
  data() {
    return {
      notice: "",
      checkList: [],
      opengg:false,
      openlabel:false,
      opengroup: false,
      openinvite: false,
    };
  },
  components: {
    EditNotice,
    TransferGroup,
    InviteGroup,
    EditLabel
  },
  methods: {

    handleGG(){
      this.opengg = true
    },
    handleGGClose(){
      this.opengg = false
    },
    handleLabelOpen(){
        this.openlabel = true
    },
    handleLabelClose(){
        this.openlabel = false
    },

    handleGroupOpen() {
      this.opengroup = true;
    },

    handleGroupClose() {
      this.opengroup = false;
    },

    handleInviteOpen() {
      this.openinvite = true;
    },

    handleInviteClose() {
      this.openinvite = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.groupcontainer {
  overflow-y: auto;
}
.boxcontent {
  height: 104px;
  padding: 8px;
  background: #f9f9f9;
  border-radius: 2px;
  overflow-x: hidden;
  word-break: break-all;
  white-space: pre-line;
}
.hauto {
  height: auto;
}
.gmgtheader {
  border-bottom: 1px solid #e9e9e9;
  padding-bottom: 5px;
}
.itemtitle {
  width: 70px;
}
.itemcontent {
  width: calc(100% - 70px);
}
</style>